<template>
  <div>
    <div class="header-search-box shadow">
      <myForm
        :searchBox="{ span: 3 }"
        :span="5"
        :optionData="searchForm.optionData"
        :ruleForm="searchForm.data"
        :formData="searchForm.config"
        @reset="getReportList(true)"
        @submitForm="getReportList(true)"
      >
      </myForm>
    </div>
    <div class="scene-main tab-scene-main">
      <el-tabs v-model="status" @tab-click="getReportList">
        <el-tab-pane
          v-for="(item, index) in $store.state.dictionary[100600]"
          :key="index"
          :label="item.label"
          :name="item.value"
        ></el-tab-pane>
      </el-tabs>

      <sec-table
        :loading="searchTable.loading"
        :tableData="searchTable.rows"
        :tableCol="searchTable.cols"
        ref="secTabel"
      >
      </sec-table>

      <el-pagination
        @size-change="sizeChange"
        @current-change="currentChange"
        :current-page.sync="currentPage"
        background
        :page-sizes="pageSizes"
        :page-size="pageSize"
        :layout="layout"
        :total="totalSize"
      >
      </el-pagination>
    </div>

    <el-dialog title="批量操作" :visible.sync="diaShow" width="50%">
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleCloseOpDialog(false)">取 消</el-button>
        <el-button type="primary" @click="handleCloseOpDialog(true)">确 定</el-button>
      </span>
    </el-dialog>
    <!-- word查看 -->
    <el-dialog title="查看报告" class="reportDialog" :visible.sync="previewShow" width="80%">
      <div class="preview-report" v-if="previewShow">
        <el-button icon="el-icon-download" class="down-report" @click="reportHandle('download')" type="primary"
          >下载报告</el-button
        >
        <div ref="word"></div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// let docx = require("docx-preview");
import { assetsSubsystemCodeList } from "api/propertyManage";
window.JSZip = require("jszip");
import myForm from "components/formValidate/myForm";
import secTable from "components/table/comTable";
import { paginationMixin } from "common/js/mixin";
import { reportSubsystemListApi, reportDownloadApi, reportSubsystemStopApi } from "api/evaluateApi";
let { NODE_ENV } = process.env;
import Cookies from "js-cookie";
import axios from "axios";
export default {
  name: "evaluate",
  props: {},
  mixins: [paginationMixin],
  components: {
    myForm,
    secTable,
  },
  data() {
    return {
      status: "",
      selectRow: {},
      diaShow: false,
      previewShow: false,
      searchForm: {
        data: {
          domain: "",
          id: "",
          assetCode: "",
          datetimerange: "",
          time: "",
        },
        config: [
          {
            type: "text",
            label: "域名",
            prop: "domain",
            placeholder: "请输入资产名称（资产ID）",
            span: 4,
          },
          {
            type: "select",
            multiple: true,
            filterable: true,
            clearable: true,
            allowCreate: true,
            collapseTags: true,
            label: "appID",
            prop: "assetCode",
            placeholder: "请输入appID",
            span: 4,
          },
          { type: "text", label: "审计任务ID", placeholder: "请输入审计任务ID", span: 4, prop: "id" },
          { type: "datetimerange", span: 9, label: "发起时间", prop: "time" },
        ],
        optionData: {
          assetCode: [],
        },
      },
      searchTable: {
        loading: false,
        cols: [
          { label: "审计任务ID", prop: "id" }, //报告id reportId
          { label: "appID", prop: "assetCode" },
          { label: "资产ID", prop: "assetId" }, //资产id assetId
          {
            label: "审计状态",
            prop: "status",
            formatter: (row, column, cellValue, index) => {
              return this.utils.getDicLabel("100600", cellValue.slice(0, 1));
            },
          },
          {
            label: "审计流程",
            prop: "status",
            formatter: (row, column, cellValue, index) => {
              if (cellValue == "37") {
                return "已完成";
              }
              return this.utils.getDicLabel("100800", cellValue);
            },
          },
          { label: "域名", prop: "domain" },
          { label: "系统名称", prop: "domainName" },
          { label: "权属负责人", prop: "leader" },
          { label: "权属部门", prop: "dept2" },
          { label: "发起人", prop: "creator" },
          { label: "发起时间", prop: "createTimeText", width: 150 },
          { label: "结束时间", prop: "endTimeText", width: 150 },
          {
            label: "操作",
            prop: "operation",
            width: 120,
            children: [
              {
                title: "详情",
                click: (data) => {
                  this.$router.push({
                    name: "specialEvaluateDetail",
                    query: { id: data.row.id, assetCode: data.row.assetCode, assetId: data.row.assetId },
                  });
                },
              },

              {
                title: "终止",
                hide: ({ row }) => {
                  var status = row.status.slice(0, 1);
                  var admin = row.adminFlag == 1 ? true : false;
                  return (status == "1" || status == "2") && admin ? false : true;
                },
                click: ({ row }) => {
                  console.log(row);
                  this.utils.$confirm({ content: "是否确定终止当前审计任务" }, () => {
                    // 执行终止操作
                    reportSubsystemStopApi({ reportId: row.id }).then((res) => {
                      //提示
                      this.message.state(res);
                      // 刷新数据
                      this.getReportList();
                    });
                  });
                },
              },

              {
                title: "查看报告",
                hide: () => {
                  return this.status == "3" ? false : true;
                },
                click: ({ row }) => {
                  this.selectRow = row;
                  this.reportDownload();
                  // this.previewShow = true;

                  // this.reportHandle("preview");
                },
              },
            ],
          },
        ],
        rows: [],
      },
    };
  },
  computed: {},
  mounted() {
    let query = this.$route.query;
    query.domain && (this.searchForm.data.domain = query.domain);
    this.getReportList();
    // 获取appID
    assetsSubsystemCodeList({ assetType: "SSO" }).then((res) => {
      this.searchForm.optionData.assetCode = res.data.map((item) => {
        return { label: item, value: item };
      });
    });
  },
  methods: {
    // 查看报告 跳转页面
    reportDownload() {
      let id = this.selectRow.id;
      // let view = "download";
      let user = Cookies.get("_sso_username_2100822") || "wlliweili_v";
      this.$router.push({
        path: "/evaluate/manage/reportDownload",
        query: { reportId: id, user: user, assetType: "SSO" },
      });
    },
    // reportHandle(type) {
    //   this.previewShow = true;
    //   let origin = "http://10.190.5.192:8083";
    //   let testEnv = ["development", "prodTest"];
    //   if (!testEnv.includes(NODE_ENV)) {
    //     origin = window.location.origin;
    //   }
    //   let url = `${origin}/check/download?reportId=${this.selectRow.id}&view=download&user=${
    //     Cookies.get("_sso_username") || "wlliweili_v"
    //   }`;
    //   if (type == "download") {
    //     window.location.href = url;
    //   } else {
    //     this.preview(url);
    //   }
    // },
    // 后端返回二进制流
    // preview(url) {
    //   // 这里需要提起打开弹窗，因为有时很找不到word的ref 会报错
    //   let loading = this.openLoading(".reportDialog .el-dialog");
    //   axios({
    //     method: "get",
    //     responseType: "blob", // 因为是流文件，所以要指定blob类型
    //     url, // 自己的服务器，提供的一个word下载文件接口
    //   }).then(({ data }) => {
    //     loading.close();
    //     docx.renderAsync(data, this.$refs.word); // 渲染到页面
    //   });
    // },
    getReportList(paginationReset) {
      if (paginationReset) {
        this.paginationReset();
      }
      this.searchTable.loading = true;
      reportSubsystemListApi({
        pageNum: this.page,
        pageSize: this.pageSize,
        domain: this.searchForm.data.domain,
        id: this.searchForm.data.id,
        assetCode: this.searchForm.data.assetCode,
        assetType: "SSO",
        startTime: this.searchForm.data.time[0] || "",
        endTime: this.searchForm.data.time[1] || "",
        status: this.status === "0" ? "" : this.status,
      }).then((res) => {
        console.log(res);
        this.searchTable.loading = false;
        this.totalSize = res.count;
        this.searchTable.rows = res.data;
      });
    },
    sizeChange(val) {
      this.pageSize = val;
      this.getReportList();
    },
    currentChange(val) {
      this.page = val;
      this.getReportList();
    },
  },
  watch: {},
};
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类
.reportDialog ::v-deep .el-dialog__body {
  position: relative;
  min-height: 200px;
  .down-report {
    position: absolute;
    right: 50%;
    top: 0px;
  }
}
::v-deep .docx-wrapper {
  background: #fff;
}
</style>
